<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="todo-list-app">
  <ol>
    <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>


<script>
  const TodoList = {
    data() {
      return {
        groceryList: [
          { id: 0, text: 'Vegetables' },
          { id: 1, text: 'Cheese' },
          { id: 2, text: 'Whatever else humans are supposed to eat' }
        ]
      }
    }
  }

  const app = Vue.createApp(TodoList)

  app.component('todo-item', {
    props: ['todo'],
    template: `<li>{{ todo.text }}</li>`
  })

  app.mount('#todo-list-app')
</script>
</body>
</html>